import React from 'react';
import 'element-theme-default';
import axios from 'axios';
import { Form,Button,Input,Message } from 'element-react';

class AddCargo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            form:{name:'', weight:'', rest:'', made:'', maker:'', remark:''},
            rules:{
                name:[{required:true, message: '请输入货物名称', trigger:'blur'}],
                weight:[{required:true,  trigger:'blur'}],
                rest:[{required:true, trigger:'blur'}],
                made:[{}],
                maker:[{}],
                remark:[{}]
            }

        }
    }

    //提交
    handleSubmit(e) {
        e.preventDefault();
        let _this = this;
        this.refs.form.validate((valid) => {
          if (valid) {
            // axios.interceptors.request.use(config => {
            //     if(config.type == 'formData' || config.method != 'post'){
            //       return config;
            //     }
            //     config.data = qs.stringify(config.data)
            //     return config;
            //   }, (err) =>{
            //     return Promise.reject(err);
            // });
            axios.post("http://localhost:8090/cargo/add",this.state.form).then(function(resp){
                Message({message:'操作成功！', type:"success",showClose:true,onClose(){
                    _this.handleReset.bind(_this);
                }});
            });
          } else {
            return false;
          }
        });
      }
      
    handleReset(e) {
        e.preventDefault();
        this.refs.form.resetFields();
    }
    onChange(key, value) {
        this.setState({
          form: Object.assign({}, this.state.form, {[key]: value})
        });
    }

    render(){
        return (      
            <Form ref="form" model={this.state.form} rules={this.state.rules} 
                labelWidth="80" className="demo-ruleForm">
                <Form.Item label="名称: " prop="name" size="small">
                    <Input value={this.state.form.name} onChange={this.onChange.bind(this, 'name')}></Input>
                </Form.Item>
                <Form.Item label="重量/kg: " prop="weight">
                    <Input value={this.state.form.weight} onChange={this.onChange.bind(this, 'weight')}></Input>
                </Form.Item>
                <Form.Item label="库存: " prop="rest">
                    <Input value={this.state.form.rest} onChange={this.onChange.bind(this, 'rest')}></Input>
                </Form.Item>

                <Form.Item label="产地: " prop="made">
                    <Input value={this.state.form.made} onChange={this.onChange.bind(this, 'made')}></Input>
                </Form.Item>
                <Form.Item label="生产商: " prop="maker">
                    <Input value={this.state.form.maker} onChange={this.onChange.bind(this, 'maker')}></Input>
                </Form.Item>
                <Form.Item label="备注: " prop="remark">
                    <Input value={this.state.form.remark} onChange={this.onChange.bind(this, 'remark')}></Input>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" onClick={this.handleSubmit.bind(this)}>提交</Button>
                    <Button onClick={this.handleReset.bind(this)}>重置</Button>
                </Form.Item>
            </Form>
        );
    }


};

export default AddCargo;

